import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

import { Col, Row } from "antd";
import NoInviteCard from '@/pages/customer/information/components/NoInviteCard';
import NoAttractionCard from '@/pages/customer/information/components/NoAttractionCard';
import GofunCard from '@/pages/customer/information/components/GofunCard';

// fake data generator
const getItems = count =>
  Array.from({ length: count }, (v, k) => k).map(k => ({
    id: `item-${k}`,
    content: `item ${k}`,
  }));

// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

const grid = 1;

const getItemStyle = isDragging => ({
  // some basic styles to make the items look a bit nicer
  userSelect: 'none',
  padding: grid * 2,
  margin: `0 ${grid}px 0 0`,

  // change background colour if dragging
  background: isDragging ? 'lightgreen' : null,
});

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? 'lightblue' : null,
  display: 'flex',
  overflow: 'auto',
});

const HorzItemList = ({ items }) => items.map((item, index) => (
  <Draggable draggableId={item.id} index={index}>
    {(provided, snapshot) => (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
        // style={{ width: '30vh' }}
      >
        {item.module}
      </div>
    )}
  </Draggable>
));


const HorzDragBanner = props => {
  const initItems = [
    {
      id: 'item-1',
      content: 'item 1',
      module: <GofunCard />,
    }, {
      id: 'item-2',
      content: 'item 1',
      module: <NoInviteCard />,
    }, {
      id: 'item-3',
      content: 'item 1',
      module: <NoAttractionCard />,
    },
  ]

  const [tempItems, setTempItems] = useState(initItems);
  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      tempItems,
      result.source.index,
      result.destination.index,
    );

    setTempItems(items);
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="list" direction="horizontal">
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            style={getListStyle(snapshot.isDraggingOver)}
            {...provided.droppableProps}
          >
            <HorzItemList items={tempItems} />
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
}

// Put the thing into the DOM!
export default HorzDragBanner;
